<ng-container>
    <farris-progress-step [steps]="stepMessages" [currentId]="currentStepId" style="margin: 14px auto 0;">
    </farris-progress-step>
</ng-container>


<!-- 选实体 -->
<div [ngClass]="currentStepId==='selectTable' ? 'd-flex f-utils-fill-flex-column px-3' : 'd-none'">

    <div class="f-utils-fill entityDiv" [class.border-0]="stepMessages && stepMessages.length===1">
        <farris-treetable #schemaTree [data]="schemaSource" [idField]="'id'" [striped]="true"
            [columns]="schemaTreeColumns" [singleSelect]="true" [showFilterBar]="false" [width]="'100%'"
            [height]="'100%'" [fit]="true" [showHeader]="false" [showBorder]="false" [fixedHeader]="true"
            [showIcon]="true" [expandIcon]="'f-icon f-icon-file-folder-close text-warning mr-2'"
            [collapseIcon]="'f-icon f-icon-file-folder-close text-warning mr-2'"
            [leafIcon]="'f-icon f-icon-file-txt text-primary mr-2'" (nodeSelected)="selectedEntityChanged($event)">
        </farris-treetable>
    </div>
</div>

<!-- 选模板-->
<div [ngClass]="currentStepId==='selectTemplates' ? 'd-flex f-utils-fill-flex-column' : 'd-none'">
    <div class="f-utils-fill d-flex">
        <div *ngFor="let template of componentTemplates" class="template border w-50"
            [class.active]="selectedTemplate && selectedTemplate.id===template.id"
            (click)="changeSelectedTemplate(template)">
            <div class="imgPanel"> <img [src]="template.image" alt="无法显示图片"></div>
            <h5>{{template.title}}</h5>
        </div>
    </div>
</div>

<!-- 选字段-->
<div [ngClass]="currentStepId==='selectShowFields' ? 'd-flex f-utils-fill-flex-column fieldsDiv' : 'd-none'">
    <div class="f-utils-fill" style="border: 1px solid #EFEFEF;">
        <farris-treetable #fieldsTree [cascadeCheck]="false" [data]="fieldsSource" [columns]="filedsTreeColumns"
            [showCheckAll]="false" [idField]="'id'" [fixedHeader]="true" [showFilterBar]="false" [width]="'100%'"
            [height]="'100%'" [fit]="true" [showIcon]="false" [showBorder]="false">
            <ng-template farrisTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        <ng-container *ngIf="col.field!=='show'">{{col.title}}</ng-container>
                        <ng-container *ngIf="col.field==='show'">{{col.title}}
                            <div *ngIf="hasSelectableFields" class="custom-control custom-checkbox d-inline ml-2">
                                <input type="checkbox" class="custom-control-input" id="CheckAll" [(ngModel)]="selectedAllFields"
                                    (ngModelChange)="clickSelectAllFieldsCheckbox()" />
                                <label class="custom-control-label" [for]="'CheckAll'"></label>
                            </div>
                        </ng-container>
                    </th>
                </tr>
            </ng-template>

            <ng-template farrisTemplate="body" let-rowNode let-rowIndex="index" let-rowData="rowData"
                let-columns="columns">
                <tr #row="row" [selectRow]="rowNode" [rowIndex]="rowIndex" [dblclick]="true"
                    [selectRowDisabled]="!rowNode.node.selectable">
                    <td *ngFor="let col of columns; let i = index"
                        [style.color]="row.selectRowDisabled? '#a6a6a6': '#333'">
                        <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
                        <ng-container *ngIf="col.field ==='name'">
                            <span [title]="rowData.name">{{rowData.name}}</span>
                        </ng-container>
                        <ng-container *ngIf="col.field==='bindingField' && rowData.$type==='SimpleField'">
                            <span [title]="rowData.bindingField">{{rowData.bindingField}}</span>
                        </ng-container>
                        <ng-container *ngIf="col.field==='type' && rowData.$type==='SimpleField'">
                            <span [title]="rowData.type.displayName">{{rowData.type.displayName ||
                                rowData.type.name}}</span>
                        </ng-container>
                        <div *ngIf="col.field==='show' && rowNode.node.selectable" class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" [id]="rowData.id"
                                [(ngModel)]="selected[rowData.bindingField]"
                                (ngModelChange)="clickCheckbox(selected[rowData.bindingField],rowData)" />
                            <label class="custom-control-label" [for]="rowData.id"> </label>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </farris-treetable>
    </div>
</div>

<ng-template #btns>
    <button class="btn btn-secondary btn-lg" *ngIf="activeStepIndex!==0" (click)="clickPreStep()">上一步</button>
    <button class="btn btn-primary btn-lg" *ngIf="activeStepIndex!==stepMessages.length-1"
        (click)="clickNextStep()">下一步</button>
    <button class="btn btn-secondary btn-lg" (click)="clickCancel()">取消</button>
    <button class="btn btn-primary btn-lg" *ngIf="activeStepIndex===stepMessages.length-1"
        (click)="clickSave()">确定</button>
</ng-template>